<template>
  <div class="page-container-padding">
    <div calss="actions">
      <el-select
        v-model="currentUserId"
        filterable
        clearable
        remote
        size="mini"
        placeholder="输入用户名称指定用户查询"
        :remote-method="getUserByName"
        :loading="userLoading"
      >
        <el-option
          v-for="u in userList"
          :key="u.id"
          :value="u.id"
          :label="u.admin_name"
        />
      </el-select>
      <el-select
        v-model="currentVariety"
        filterable
        clearable
        style="margin-right: 5px; margin-left: 6px"
        placeholder="全部品种"
        size="mini"
      >
        <el-option
          v-for="(v, i) in varietyList"
          :key="i"
          :value="v.variety_en"
          :label="v.variety_long_name"
        />
      </el-select>
      <el-button type="primary" size="mini" @click="queryGroups">
        查询
      </el-button>
    </div>
    <div style="margin-top: 25px">
      <div>指标分组</div>
    </div>
    <div class="create-new-box">
      <el-tag>{{ newGroup.parentName }}</el-tag>
      <el-input
        v-model="newGroup.newName"
        size="mini"
        placeholder="输入新建组别名称"
        style="margin-left: 6px"
      />
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 6px"
        @click="toCreateNewGroup"
      >
        确定保存
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
        border
        stripe
        row-key="id"
        :data="groupTree"
        @row-dblclick="dblClickGroup"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
      </el-table>
    </div>
    <div style="margin-top: 25px">组内指标</div>
    <div>
      <el-button type="primary" size="mini" @click="toAddNewIndex">
        新增
      </el-button>
    </div>
    <el-table border stripe style="margin-top: 10px" :data="indexList">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="formula" label="公式" />
      <el-table-column prop="source_plat" label="平台" width="80" />
      <el-table-column prop="source_id" label="平台ID" width="120" />
    </el-table>

    <!-- 组内增加指标弹窗 -->
    <el-dialog :visible.sync="newIndex.showCreate" title="组内创建指标">
      <div style="padding: 5px 15px">
        <el-form>
          <el-form-item label="指标">
            <el-select
              v-model="newIndex.index_id"
              filterable
              clearable
              remote
              size="mini"
              placeholder="输入查询指标"
              style="width: 90%"
              :remote-method="getIndexByKeyword"
              :loading="indexLoading"
              @change="selectIndexChange"
            >
              <el-option
                v-for="idx in indexForSelect"
                :key="idx.id"
                :value="idx.id"
                :label="`${idx.name_zh} (${idx.source_plat})`"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="组别ID">
            <div>{{ newIndex.groupId }}</div>
          </el-form-item>
          <el-form-item label="指标ID">
            <div>{{ newIndex.index_id }}</div>
          </el-form-item>
          <el-form-item label="公式">
            <div>{{ newIndex.index_id }}</div>
          </el-form-item>
          <el-form-item label="单位">
            <div>{{ newIndex.unit }}</div>
          </el-form-item>
          <el-form-item label="平台">
            <div>{{ newIndex.source_plat }}</div>
          </el-form-item>
          <el-form-item label="平台ID">
            <div>{{ newIndex.source_id }}</div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="newIndex.showCreate = false">取消</el-button>
        <el-button
          type="primary"
          :loading="newIndex.saveLoading"
          @click="toSaveGroupIndex"
        >
          确定保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { GetUserListByName } from '@/api/systemManage/userInfo'
  import { getUserAuthVariety } from '@/api/operations/variety'
  import {
    getUserDatalibGroup,
    createUserDatalibGroup,
    getUserGroupIndex,
    createUserGroupIndex,
  } from '@/api/admin/userDatalib'
  import { getEDBTables } from '@/api/edbdata/datalib'
  export default {
    data() {
      return {
        currentUserId: null,
        currentVariety: null,
        userLoading: false,
        userList: [],
        varietyList: [],
        groupTree: [],
        selectGroupId: '',
        newGroup: {
          parentName: '无',
          parentId: 0,
          newName: '',
        },

        indexLoading: false,
        indexList: [],
        indexForSelect: [],
        newIndex: {
          showCreate: false,
          groupId: null,
          index_id: null,
          name: '',
          formula: '',
          frequency: '',
          unit: '',
          source_plat: '',
          source_id: '',
          saveLoading: false,
        },
      }
    },
    mounted() {
      getUserAuthVariety({ space: 'V03' }).then((res) => {
        this.varietyList = res.data
      })
    },
    methods: {
      getUserByName(name) {
        if (name === '') {
          return
        }
        this.userLoading = true
        GetUserListByName(name).then((res) => {
          this.userList = res.data
          this.userLoading = false
        })
      },

      queryGroups() {
        if (!this.currentUserId || !this.currentVariety) return
        getUserDatalibGroup(this.currentUserId, this.currentVariety).then(
          (res) => {
            this.groupTree = res.data
          }
        )
      },

      dblClickGroup(row) {
        this.newGroup.parentId = row.id
        this.newGroup.parentName = row.name

        this.newIndex.groupId = row.id
        this.queryGroupIndex()
      },

      toCreateNewGroup() {
        createUserDatalibGroup({
          name: this.newGroup.newName,
          parent_id: this.newGroup.parentId,
          vcode: this.currentVariety,
          user_id: this.currentUserId,
        }).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.newGroup.newName = ''
        })
      },

      queryGroupIndex() {
        getUserGroupIndex(this.newIndex.groupId).then((res) => {
          this.indexList = res.data.indexes
        })
      },

      getIndexByKeyword(kw) {
        getEDBTables({ kw, page: 1, page_size: 200 }).then((res) => {
          // console.log(res)
          this.indexForSelect = res.data.records
        })
      },

      toAddNewIndex() {
        if (!this.newIndex.groupId) {
          this.$baseMessage('请先双击选择组再添加!')
          return
        }
        this.newIndex.showCreate = true
      },
      selectIndexChange(indexId) {
        // console.log(indexId)
        for (let i = 0; i < this.indexForSelect.length; i++) {
          const idx = this.indexForSelect[i]
          if (idx.id === indexId) {
            this.newIndex.name = idx.name_zh
            this.newIndex.formula = `${idx.source_plat}_${idx.source_id}`
            this.newIndex.frequency = idx.frequency
            this.newIndex.unit = idx.unit
            this.newIndex.source_plat = idx.source_plat
            this.newIndex.source_id = idx.source_id
            break
          }
        }
      },

      toSaveGroupIndex() {
        if (!this.newIndex.index_id) {
          this.$baseMessage('请先设定指标!', 'error')
          return
        }
        const newIndex = {
          index_id: this.newIndex.index_id,
          name: this.newIndex.name,
          formula: this.newIndex.formula,
          frequency: this.newIndex.frequency,
          unit: this.newIndex.unit,
          is_diff: false,
          vcode: this.currentVariety,
          user_id: this.currentUserId,
          group_id: this.newIndex.groupId,
          source_plat: this.newIndex.source_plat,
          source_id: this.newIndex.source_id,
        }
        this.newIndex.saveLoading = true
        createUserGroupIndex(newIndex).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.newIndex.index_id = null
          this.newIndex.saveLoading = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .create-new-box {
    display: flex;
    align-items: center;
  }
</style>
